<template>
  <div class="task-info">
    <el-dialog
      v-model="dialogVisible"
      class="review-dialog"
      width="615"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="header">
        <div class="title">{{ taskInfo.info }}</div>
        <div class="close" @click="close">
          <i class="iconfont icon-chahao1 close-dialog"></i>
        </div>
      </div>
      <div class="content">
        <div class="content-head">
          {{ taskInfo.status == 3 ? "错误信息" : "信息详情" }}
        </div>
        <div class="content-info">
          {{ taskInfo.status == 3 ? taskInfo.errorMsg : taskInfo.result }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, watch, computed, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";

const dialogVisible = ref(false);
const taskInfo = ref({});

const open = (data = null) => {
  dialogVisible.value = true;
  if (data) {
    console.log(data);

    taskInfo.value = data;
  }
};

const close = () => {
  dialogVisible.value = false;
  nextTick(() => {
    taskInfo.value = {};
  });
};
defineExpose({
  open,
});
</script>
<style lang="less" scoped>
.task-info {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .title {
      line-height: 33px;
      font-weight: 700;
      font-size: 24px;
      color: #222;
    }
    .close {
      margin-top: 4px;
      .close-dialog {
        cursor: pointer;
        font-size: 34px;
        color: #8c8c8c;
        transition: all 0.3s ease-in-out;
        &:hover {
          color: #8c8c8cbd;
        }
      }
    }
  }
  .content {
    padding: 0px 10px;
    .content-head {
      color: #555;
      font-weight: bold;
      font-size: 17px;
    }
    .content-info {
      height: 425px;
      color: #555;
      font-size: 15px;
      padding: 0px 5px;
      margin-top: 10px;
      overflow: auto;
      scrollbar-width: none;
      /* firefox */
      -ms-overflow-style: none;
      /* IE 10+ */
      overflow-x: hidden;
      overflow-y: auto;
    }
  }
}
</style>
